<template>
    <div>
        <el-form label-width="80px" :model="findData" size="small" ref="form">
            <el-row :gutter="20">
                <el-col :span="6" :offset="0">
                    <el-form-item label="单据编号:">
                        <el-input v-model="menu.number" placeholder="请输入单据编号"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="6" :offset="0">
                    <el-form-item label="商品信息:">
                        <el-input v-model="menu.model" placeholder="请输入商品信息"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="0">
                    <el-form-item label="单据日期:">
                        <div class="demo-date-picker">
                            <div class="block">
                                <span class="demonstration"></span>
                                <el-date-picker value-format="YYYY/MM/DD" v-model="value1" type="daterange"
                                    range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" :size="size" />
                            </div>
                        </div>
                    </el-form-item>
                </el-col>


                <el-col :span="6" :offset="0">
                    <el-form-item>
                        <el-button type="primary" @click="loadData">查询</el-button>
                        <el-button @click="onReset">重置</el-button>
                        <a @click="toggle" style="margin-left: 10px">
                            {{ LinkText }}
                            <i v-show="!block">
                                <svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em"
                                    fill="currentColor" aria-hidden="true" focusable="false" class="">
                                    <path
                                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z">
                                    </path>
                                </svg>
                            </i>
                            <i v-show="block">
                                <svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor"
                                    aria-hidden="true" focusable="false" class="">
                                    <path
                                        d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z">
                                    </path>
                                </svg>
                            </i>
                        </a>
                    </el-form-item>
                </el-col>
            </el-row>

            <div v-show="block">
                <el-row :gutter="20">


                    <el-col :span="6" :offset="0">
                        <el-form-item label="仓库名称:">
                            <el-select v-model="menu.depId">
                                <el-option v-for="item in depotname" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6" :offset="0">
                        <el-form-item label="操作员:">
                            <el-select v-model="menu.userId">
                                <el-option v-for="item in username" :key="item.id" :label="item.username"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6" :offset="0">

                        <el-form-item label="单据状态:">
                            <el-select v-model="menu.status">
                                <el-option v-for="item in status" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="0">
                        <el-form-item label="单据备注:" prop="remark">
                            <el-input v-model="menu.remark" placeholder="请输入单据备注"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>


        </el-form>
        <el-row :gutter="20">

            <el-button type="primary" v-perm:depot:allocate:insert="insert">新增</el-button>
            <el-dropdown>
                <el-button class="ant-btn" style="margin-left: 8px;">
                    批量操作<el-icon>
                        <ArrowDown />
                    </el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <template v-for="item in strBtn">
                            <template v-if="item === '编辑'">
                                <el-dropdown-item @click="removes">
                                    <el-icon>
                                        <Delete />
                                    </el-icon>
                                    <span>删除</span>
                                </el-dropdown-item>
                            </template>
                            <template v-else-if="item === '审核'">
                                <el-dropdown-item @click="selectChange(1)">
                                    <el-icon>
                                        <Select />
                                    </el-icon>
                                    <span>{{ item }}</span>
                                </el-dropdown-item>
                            </template>
                            <template v-else>
                                <el-dropdown-item @click="selectChange(0)">
                                    <el-icon>
                                        <CircleClose />
                                    </el-icon>
                                    <span>{{ item }}</span>
                                </el-dropdown-item>
                            </template>
                        </template>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </el-row>
        <el-table :data="page.records" border stripe @current-change="handleCurrentChange"
            @selection-change="handleSelectionChange">绑定更改事件

            <el-table-column type="selection" width="50" />
            <el-table-column label="操作" width="230" align="center">
                <template #default="scope">
                    <el-button :row="scope.row" type="primary" link v-perm:depot:allocate:look="look">查看</el-button>
                    <!-- <a @click="look({ cname: '查看', path: '/depot/other_in/look' },page.records )"></a> -->

                    <el-button :row="scope.row" type="primary" link v-perm:depot:allocate:update="update">编辑</el-button>
                    <el-button :row="scope.row" type="primary" link v-perm:depot:allocate:copy="copy">复制</el-button>
                    <el-button :row="scope.row" type="primary" link v-perm:depot:allocate:remove="remove">删除</el-button>
                </template>
            </el-table-column>

            <el-table-column label="单据编号" prop="number">
            </el-table-column>
            <el-table-column label="商品信息" prop="materialName">
            </el-table-column>
            <el-table-column label="单据日期" prop="operTime">
            </el-table-column>
            <el-table-column label="操作员" prop="username">
            </el-table-column>
            <el-table-column label="数量" prop="erpDepotItemList[0].operNumber">
            </el-table-column>
            <el-table-column label="金额合计" prop="allPrice">
            </el-table-column>
            <el-table-column label="状态" prop="state">
                <template #default="scope">
                    <el-tag v-if="scope.row.status == 0" type="danger">未审核</el-tag>
                    <el-tag v-else-if="scope.row.status == 1" type="success">已审核</el-tag>
                    <el-tag v-else-if="scope.row.status == 2" type="success">完成采购</el-tag>
                    <el-tag v-else-if="scope.row.status == 2" type="success">部分采购</el-tag>
                    <el-tag v-else-if="scope.row.status == 2" type="success">审核中</el-tag>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">

            <el-pagination v-model:current-page="page.current" v-model:page-size="page.size"
                :page-sizes="[2, 5, 10, 20]" layout="total, sizes, prev, pager, next" :total="page.total"
                style="float:right; margin-top: 10px;" @change="loadData" />
        </div>
        <el-dialog :destroy-on-close="true" :title="title" v-model="visible" width="85%" clearable>
            <router-view @close="close" :data="data"></router-view>
        </el-dialog>

    </div>
</template>

<script setup>
import { ref, defineProps } from 'vue'
import router from '@/router'
import reqeust from '@/api/request'
import useSys from '@/store/useSys';
import { Delete, Pointer, Select } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox, ElConfigProvider } from "element-plus";

const props = defineProps(['strBtn'])
let strBtn = props.strBtn

let sys = useSys()
const value1 = ref('')
let visible = ref(false)
let title = ref("")
let findData = ref({})
let select = ref('')
let block = ref(false)
let LinkText = ref("展开")
// console.log(select);
const menu = ref({})
let toggle = () => {
    block.value = !block.value
    LinkText.value = block.value ? "收起" : "展开"
}

let depot = ref({})
let data = ref({})
let roles = ref([])
let page = ref({})

let status = [
    {
        value: 0,
        label: '未审核',
    }, {
        value: 1,
        label: '已审核'
    }

]

let total = ref(0)
let totalPages = ref(0)
let size = ref(3)
let limit = ref(2)
const loadData = () => {
    // const createTime =ref('')
    // const endTime = ref('')
    // if (value1.value) {
    //     createTime = value1.value[0]
    //     endTime = value1.value[1]
    // }
    reqeust({
        url: '/depot/find',
        method: 'get',
        params: {
            current: page.value.current,
            size: page.value.size,
            number: menu.value.number,
            status: menu.value.status,
            organId: menu.value.organId,
            depId: menu.value.depId,
            userId: menu.value.userId,
            createTime: menu.value.createTime,
            endTime: menu.value.endTime,
            type: '出库',
            subType: '调拨',
            remark: menu.value.remark,
            model: menu.value.model

        }
    }).then(res => {
        page.value.records = res.data.records;
        page.value.total = res.data.total;
        console.log(res.data);

    })
};
const onReset = () => {

    menu.value = {};
    value1.value = null;
    loadData();
};

loadData();

//多选值
let multipleSelection = ref([])
let ids = ref([])
//获取多选的值转入multipleSelection中
let handleSelectionChange = (val) => {
    multipleSelection.value = val;
    ids.value = val.map(item => item.id);
}


let supname = ref([])
reqeust.get('/depot/findSupplier' + "/" + 0, { method: 'get' }).then(resp => {
    supname.value = resp.data
})

let depotname = ref([])
reqeust.get('/depot/list').then(resp => {
    depotname.value = resp.data
})

let username = ref([])
reqeust.get('/depot/findUser').then(resp => {
    username.value = resp.data
})
/**
 * 跳转到指定路由并显示对话框
 * @param {Object} menu - 菜单对象，包含路由路径和中文名称
 * 该函数的作用是当用户点击一个菜单项时，跳转到该菜单项对应的路由路径，
 * 并在前端界面中显示一个对话框，告诉用户当前所在的位置。
 */
let insert = (menu) => {
    // 设置对话框标题为菜单项的中文名称
    title.value = menu.cname
    // 显示对话框 
    visible.value = true;
    // 跳转到菜单项对应的路由路径
    router.push(menu.path)
}

/**
 * 根据菜单项和行数据更新UI状态和路由
 * 
 * @param {Object} menu - 菜单项对象，包含菜单的中文名称和路径
 * @param {Object} row - 行数据对象，用于在弹窗中显示详细信息
 */
let update = (menu, row) => {
    // 设置弹窗标题为菜单项的中文名称
    title.value = menu.cname
    // 显示弹窗
    visible.value = true;
    // 将行数据赋值给data，以便在弹窗中显示
    data.value = row
    // 打印行数据，用于调试
    console.log(row);

    // 跳转到菜单项对应的路由
    router.push(menu.path)
}



const look = (p, row) => {
    title.value = p.cname;
    visible.value = true;
    router.push(p.path);
    data.value = row;
    console.log(row);
}

let copy = (menu, row) => {
    title.value = menu.cname
    visible.value = true;
    data.value = row;
    // 跳转到查看页面，并将行数据作为参数传递给路由
    router.push(menu.path)
}
let close = () => {
    loadData()
    visible.value = false;
}

let remove = (menu, row) => {
    ids.value.push(row.id)
    reqeust.put("/depot/update", {
        ids: ids.value,
        status: "1"
    }).then(resp => {
        // 删除成功后，重新加载数据以更新列表
        loadData();
    })
}

//批量删除
let removes = () => {
    if (ids.value.length === 0) {
        ElMessage.warning('请先选择至少一项记录');
        return;
    }

    let allApproved = true; // 假设所有选中的项都是未审核的
    multipleSelection.value.forEach(item => {
        if (item.status != 0) {
            console.log(item.status);
            ElMessage.warning('抱歉，只有未审核的单据才能删除！');
            allApproved = false; // 发现有已审核的项，设置标志为false
        }
    });

    if (allApproved) {
        request.delete("/sale/delete", {
            data: ids.value
        }).then(resp => {
            ElMessage.success(resp.data);
            init();
        }).catch(error => {
            ElMessage.error('删除失败，请重试！');
            console.error(error);
        });
    }
};

let selectChange = (val) => {
    if (ids.value.length === 0) {
        ElMessage.warning('请先选择至少一项记录');
        return;
    }

    let allApproved = true;
    if (val == 1) {
        multipleSelection.value.forEach(item => {
            if (item.status != 0) {
                ElMessage.warning('抱歉，只有未审核的单据才能审核！');
                allApproved = false;
                return;
            }
        });
    } else {
        multipleSelection.value.forEach(item => {
            if (item.status == 0) {
                ElMessage.warning('抱歉，只有已审核的单据才能反审核！');
                allApproved = false;
                return;
            }
        });
    }
    if (allApproved) {
        reqeust.put("/purchase/order/modifyTheState", {
            ids: ids.value,
            status: val
        }).then(resp => {
            ElMessage.success(resp.data);
            loadData()
        }).catch(error => {
            ElMessage.error('操作失败，请重试！');
            console.error(error);
        });
    }
}
</script>

<style scoped>
/* .demo-fore-inline .el-input{
        --el-input-width:200px;
    } */
a:active,
a:hover {
    text-decoration: none;
    outline: 0;
}

a:hover {
    color: #40a9ff;
}

a {
    color: #1890ff;
    text-decoration: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    transition: color .3s;
    -webkit-text-decoration-skip: objects;
}
</style>
